<template>
  <div>
    <CategorySelector :isShow="isShow" />
    <SpuList v-if="isShow === SpuStatus.Spu_List" @changeIsShow="changeIsShow" />
    <SpuForm v-else-if="isShow === SpuStatus.Spu_Form" @changeIsShow="changeIsShow" />
    <SkuForm v-else @changeIsShow="changeIsShow" />
  </div>
</template>
<script lang="ts">
export default {
  name: 'Spu',
  components: {SpuList, SpuForm, SkuForm}, // 局部注册组件
}
</script>
<script lang="ts" setup>
import {onBeforeUnmount, onMounted, ref} from 'vue'
// 引入子组件
import SpuList from './components/spuList.vue'
import SpuForm from './components/spuForm.vue'
import SkuForm from './components/skuForm.vue'
// 引入Spu组件显示状态标识
import {SpuStatus} from './SpuStatus'
// 引入分类仓库
import {useCategoryStore} from '@/stores/category'
const categoryStore = useCategoryStore()

// 定义Spu子组件是否显示的标识
const isShow = ref<SpuStatus>(SpuStatus.Spu_List)
// 修改标识
const changeIsShow = (val: SpuStatus) => {
  isShow.value = val
}

// 组件销毁前
onBeforeUnmount(() => {
  // 清空数据
  categoryStore.$state = {
    category1Id: undefined,
    category2Id: undefined,
    category3Id: undefined,
    category1List: [],
    category2List: [],
    category3List: []
  }
})


</script>
<style scoped>
</style>